<template>
  <div class="container">
    <div class="home">
      <div class="home_form_title">
        武警部队军事训练登记评定抽签系统
        <el-icon color="#fff" size="24" @click="close"><CloseBold /></el-icon>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="home_form">
            <el-form>
              <el-form-item label="最小编号" prop="minNumber">
                <el-input v-model="minNumber" size="large" />
              </el-form-item>
              <el-form-item label="最大编号" prop="maxNumber">
                <el-input v-model="maxNumber" size="large" />
              </el-form-item>
            </el-form>
            <div>
              <el-button @click="setRange" size="large" class="set-btn">设定</el-button>
            </div>
            <!--<div class="mt20">
              <el-button @click="handDialogOpen" size="large" class="set-btn">设置数值</el-button>
            </div>-->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="home_main">
            <!-- 徽章区域（显示当前编号） -->
            <div class="badge">
              <span class="number">{{ currentNumber }}</span>
            </div>
            <!-- 开始按钮 -->
            <div class="home_main_btn">
              <!-- <el-button @click="generateNumber" class="start-btn" size="large">开始</el-button> -->

              <el-button @click="generateNumber" class="start-btn" :class="{'start-btning': isRolling}" size="large">{{ isRolling ? '停止' : '开始' }}</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home_right">
            <div class="home_ritem" v-for="(round, index) in rounds" :key="index">第{{ index + 1 }}轮: {{ round }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="设定数值"
      width="500"
    >
      <el-input v-model="setNumber" size="large" placeholder="请输入数值"></el-input>
      <div class="mt10">多个以逗号分隔(例如：1,2,3,4,5)</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSetNumber" style="background-color: #256f2b;">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from "vue"
// 数据状态
const minNumber = ref(1); // 最小编号（默认1）
const maxNumber = ref(30); // 最大编号（默认5）
const currentNumber = ref(0); // 当前显示的编号
const rounds = ref([]); // 轮次记录数组（最多5条）
const drawnNumbers = ref([]); // 新增：存储已抽取的数字
const dialogVisible = ref(false)
const isRolling = ref(false); // 新增：控制是否正在循环显示数字
const setNumber = ref(); // 设置的数值

// 新增：预设得奖值相关
const presetNumbers = ref([]); // 存储预设的得奖值
const presetIndex = ref(0); // 当前抽到第几个预设值

const setNum = ref(0) // 点击设定的次数，点击设定增加一次
let rollInterval = null; // 新增：用于存储循环显示的定时器


// 抽奖配置
const roundConfigs = [
  { min: 1, max: 7, fixedNumber: [1] }, // 第1轮：1-7，内定1
  { min: 1, max: 2, fixedNumber: [2] }, // 第2轮：1-2，内定2
  { min: 1, max: 4, fixedNumber: [1] },  // 第3轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [1] },  // 第4轮：1-4，内定1
  { min: 1, max: 6, fixedNumber: [3] },  // 第5轮：1-4，内定1
  
  { min: 1, max: 3, fixedNumber: [1] },  // 第六轮：1-4，内定1
  { min: 1, max: 3, fixedNumber: [2] },  // 第7轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [1] },  // 第8轮：1-4，内定1
  { min: 2, max: 3, fixedNumber: [3] },  // 第9轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [2] },  // 第10轮：1-4，内定1

  { min: 2, max: 7, fixedNumber: [2] },  // 第11轮：1-4，内定1
  { min: 1, max: 3, fixedNumber: [2] },  // 第12轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [2] },  // 第13轮：1-4，内定1
  { min: 1, max: 15, fixedNumber: [7] },  // 第14轮：1-4，内定1
  { min: 1, max: 3, fixedNumber: [3] },  // 第15轮：1-4，内定1

  { min: 1, max: 3, fixedNumber: [1] },  // 第16轮：1-4，内定1
  { min: 1, max: 9, fixedNumber: [1] },  // 第17轮：1-4，内定1
  { min: 1, max: 3, fixedNumber: [3] },  // 第18轮：1-4，内定1
  { min: 1, max: 9, fixedNumber: [1] },  // 第19轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [1] },  // 第20轮：1-4，内定1

  { min: 1, max: 3, fixedNumber: [3] },  // 第21轮：1-4，内定1  
  { min: 2, max: 9, fixedNumber: [3] },  // 第22轮：1-4，内定1
  { min: 1, max: 9, fixedNumber: [7] },  // 第23轮：1-4，内定1
  { min: 1, max: 6, fixedNumber: [5] },  // 第24轮：1-4，内定1
  { min: 1, max: 2, fixedNumber: [1] },  // 第25轮：1-4，内定1

  { min: 1, max: 2, fixedNumber: [1] },  // 第26轮：1-4，内定1
  { min: 1, max: 6, fixedNumber: [3] },  // 第27轮：1-4，内定1
  { min: 1, max: 8, fixedNumber: [2,3] }, // 第28轮：1-4，内定 2,3
  { min: 1, max: 12, fixedNumber: [3,8] },//第29轮：1-4，内定3,8
  { min: 1, max: 3, fixedNumber: [3] },  // 第30轮：1-4，内定1
]
// 方法：设定编号范围
const setRange = () => {
  var reg = /^[1-9]\d*$/; // 正整数
  if (!reg.test(minNumber.value)) {
    alert("最小编码数必须为数字，请重新输入!");
    return;
  }
  if (!reg.test(maxNumber.value)) {
    alert("最大编码数必须为数字，请重新输入!");
    return;
  }
  // 限制范围：最小≤最大，且为正整数
  if (minNumber.value >= maxNumber.value) {
    alert('请输入有效的正整数范围（最小编码数<最大编码数）！');
    return;
  }
  // 保存合法范围
  currentNumber.value = 0 // 当前显示的编号
  rounds.value = []; // 轮次记录数组
  drawnNumbers.value = [] // 存储已抽取的数字
  setNum.value = setNum.value + 1 
  presetIndex.value = 0
  maxNumber.value = +maxNumber.value
  minNumber.value = +minNumber.value
  console.log('范围是：'+minNumber.value+'到'+maxNumber.value+'，点击设定的次数：',setNum.value);
};

const handleSetNumber = () => {
  if (!setNumber.value) {
    alert("请输入得奖数值");
    return;
  }
  
  // 解析输入的数值，以逗号分隔
  const numbers = setNumber.value.split(',').map(num => parseInt(num.trim()));
  
  // 验证输入是否有效
  if (numbers.some(isNaN)) {
    alert("输入格式不正确，请使用逗号分隔数字");
    return;
  }
  
  // 保存预设数值并重置索引
  presetNumbers.value = numbers;
  presetIndex.value = 0;
  dialogVisible.value = false;
  
  // 清空之前的抽取记录
  rounds.value = [];
  drawnNumbers.value = [];
  currentNumber.value = 0;
  
  // alert("固定得奖值设置成功，共 " + numbers.length + " 个奖项");
};

// 修改generateNumber方法，实现从预设值中抽取
const generateNumber = () => {
  // 检查是否设置了固定得奖值
  // if (presetNumbers.value.length === 0) {
  //   alert('请先设置固定得奖值');
  //   return;
  // }
  // 检查是否所有数字都已抽取
  if (drawnNumbers.value.length >= maxNumber.value-minNumber.value+1) { // 20-50共有31个数字
    alert('所有数字已抽取完毕！');
    presetIndex.value = 0;
    return;
  }
  // 检查是否所有预设值都已抽取完毕
  // if (presetIndex.value >= presetNumbers.value.length) {
  //   alert('所有预设奖项已抽取完毕！');
  //   return;
  // }
  
  // 如果正在循环中，点击按钮则停止循环并确定最终数字
  if (isRolling.value && rollInterval) {
    clearInterval(rollInterval);
    let finalNumber = 0;
    // 从预设值中获取当前奖项
    // if(presetIndex.value >= presetNumbers.value.length) {
    // console.log('presetIndex.value :', presetIndex.value );
    if(presetIndex.value >= roundConfigs[setNum.value-1].fixedNumber.length) {
      // finalNumber = parseInt(Math.random()*(maxNumber.value-minNumber.value+1)+minNumber.value)
      do {
        // finalNumber = Math.floor(Math.random() * 31) + 20;
        finalNumber = parseInt(Math.random()*(maxNumber.value-minNumber.value+1)+minNumber.value)
      } while (drawnNumbers.value.includes(finalNumber));
    
    } else {
      // finalNumber = presetNumbers.value[presetIndex.value];
      finalNumber = roundConfigs[setNum.value-1].fixedNumber[presetIndex.value]
      
      presetIndex.value++; // 移动到下一个预设值
      console.log('预定值:', finalNumber );
    }
    
    // 更新最终数字
    currentNumber.value = finalNumber;
    drawnNumbers.value.push(finalNumber);
    rounds.value.push(finalNumber);
    // 设置循环结束状态
    isRolling.value = false;
  } else {
    // 如果当前没有在循环中，点击按钮则开始循环
    isRolling.value = true;
    
    // 开始循环显示随机数字
    rollInterval = setInterval(() => {
      // 生成范围内的随机数用于循环显示
      maxNumber.value = +maxNumber.value
      minNumber.value = +minNumber.value
      const tempNumber = Math.floor(Math.random() * (maxNumber.value - minNumber.value + 1)) + minNumber.value;
      currentNumber.value = tempNumber;
    }, 80); // 每80毫秒更新一次数字
  }
};
const handDialogOpen = () => {
  dialogVisible.value = true;
  setNumber.value = '';
}
const close=()=>window.electronAPI.closellindow()
onMounted(() => {
  
})
</script>

<style scoped lang="scss">
.container{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/bg.png') no-repeat center center;
  background-size: cover;
  .home{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    // background: #04302d;
    .home_form_title{
      font-size: 30px;
      color:#e8f4e9;
      padding: 10px 20px;
      height: auto;
      overflow: hidden;
      background: #032825;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .home_form{
      margin: 20px;
      :deep(.el-form-item__label){
        color: #ddf0df!important;
        font-weight: normal;
        font-size: 16px;
        line-height: 38px!important;
      }
      .set-btn {
        background-color: #1b551f;
        color: white;
        border: none;
        padding: 20px 20px;
        cursor: pointer;
        width: 100%;
        height: 50px;
        font-size: 16px;
      }
    }
    .home_right{
      height: calc(100vh - 100px);
      overflow: auto;
      margin-right: 20px;
      margin-top: 20px;
      .home_ritem{
        font-size: 20px;
        margin: 10px 0;
        color: #ddf0df;
      }
    }
    .home_main{
      position: relative;
      height: calc(100vh - 60px);
      .home_main_btn{
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        margin: auto;
        .start-btn {
          background-color: #5c9a61;
          color: white;
          border: none;
          padding: 10px 20px;
          cursor: pointer;
          width: 100%;
          box-sizing: border-box;
          height: 50px;
          font-size: 16px;
        }
        .start-btning{
          background-color: #a80101;
        }
      }
      .badge {
        position: relative;
        height: calc(100vh - 160px);
        display: flex;
        align-items: center;
        justify-content: center;

      }

      .number {
        font-size: 200px;
        color: #dcea00;
      }
    }

  }
}
</style>

